import { ref, watch, computed, onMounted } from "vue";
import { useStore } from "vuex";

export const useSetCollapsed = () => {
  // 初始化vuex
  const store = useStore();
  // 侧边栏状态
  const collapsed = computed(() => store.state.siderStore.collapsed);
  // h1标签元素
  const logoh = ref(null);
  // 设置侧边栏状态
  const setCollapsed = () => {
    store.commit("siderStore/SET_COLLAPSED");
  };
  // margin-left距离
  const marginLeft = ref("310px");
  // 监听侧边栏状态
  watch(collapsed, () => {
    // 根据侧边栏状态显示隐藏h1标签
    if (logoh.value !== null) {
      if (collapsed.value === true) {
        logoh.value.style = "display:none";
      }
      if (collapsed.value === false) {
        setTimeout(() => {
          logoh.value.style = "display:block";
        }, 200);
      }
    }
    // 如果为true就设置左外边距为90px
    if (collapsed.value === true) {
      marginLeft.value = "90px";
    }
    // 如果为false就设置左外边距为310px
    if (collapsed.value === false) {
      marginLeft.value = "310px";
    }
  });

  onMounted(() => {
    if (collapsed.value === true && logoh.value) {
      logoh.value.style = "display:none";
    }
    if (collapsed.value === true) {
      marginLeft.value = "90px";
    }
  });

  return {
    collapsed,
    logoh,
    setCollapsed,
    marginLeft,
  };
};
